@import "../bootstrap-overrides";

// Create the Vapor color map
$custom-colors: (
    "blue-500": #135b80,
    "blue-400": #1E92CC,
    "blue-300": #40c4ff,
    "blue-200": #a6e3ff,
    "blue-100": #e8f6fd,
    "pink-500": #701980,
    "pink-400": #B11FCC,
    "pink-300": #DF3EFB,
    "pink-200": #EA7EFC,
    "pink-100": #F9ECFB,
    "grey-900": #141416,
    "grey-800": #373953,
    "grey-700": #666880,
    "grey-600": #8385A3,
    "grey-500": #9FA1BF,
    "grey-400": #C1C2D6,
    "grey-300": #DFE0EB,
    "grey-200": #F0F0F7,
    "grey-100": #FAFAFD,
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

$blue-500: #135b80;
$blue-400: #1E92CC;
$blue-300: #40c4ff;
$blue-200: #a6e3ff;
$blue-100: #e8f6fd;
$pink-500: #701980;
$pink-400: #B11FCC;
$pink-300: #DF3EFB;
$pink-200: #EA7EFC;
$pink-100: #F9ECFB;
$grey-900: #141416;
$grey-800: #373953;
$grey-700: #666880;
$grey-600: #8385A3;
$grey-500: #9FA1BF;
$grey-400: #C1C2D6;
$grey-300: #DFE0EB;
$grey-200: #F0F0F7;
$grey-100: #FAFAFD;
$off-black: #1C1C1F;
$off-light-grey: #EAECF0;
$off-black-2: #101828;
$code-error-sidebar-background-red: #b2235f1a;

// Define the fonts:
$font-family-sans-serif: "Genera Grotesk", "Inter", system-ui, helvetica, sans-serif;
$font-family-monospace: "Roboto Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

// Vapor Fonts
@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-Regular.woff2') format("woff2");
}

@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-Italic.woff2') format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-Medium.woff2') format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-MediumItalic.woff2') format("woff2");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-Bold.woff2') format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Genera Grotesk";
    src: url('../../fonts/GeneraGrotesk-BoldItalic.woff2') format("woff2");
    font-weight: 700;
    font-style: italic;
}

// Global Overrides
$link-color: $blue-300;
$link-decoration: none;
$link-hover-color: $blue-300;
$link-hover-decoration: underline;
$card-height: 100%;

body {
    font-feature-settings: 'salt' on;
}

#vapor-logo {
    width: 130px;
    height: 50px;
}

.dropdown-no-outline {
    outline: 0;
}

.vapor-container {
    max-width: 720px;
}

.btn {
    font-size: 16px;
    line-height: 100%;
    --#{$prefix}btn-border-radius: 16px;
    --#{$prefix}btn-border-color: transparent;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
}

.btn-small {
    font-size: 14px;
    line-height: 150%;
    --#{$prefix}btn-border-radius: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.btn-primary {
    --#{$prefix}btn-bg: linear-gradient(180deg, $pink-300 0%, $pink-500 100%);
    background: linear-gradient(180deg, $pink-300 0%, $pink-500 100%);
    --#{$prefix}btn-color: white;
    color: white;
    border: none;

    a {
        color: white;
        display: inline-flex;
    }


    a:hover {
        color: white;
        text-decoration: none;
    }

    .vapor-icon {
        background-color: white;
        width: 16px;
        height: 16px;
        margin-left: 10px;
    }
}

blockquote {
    color: $grey-800;
    border-left: 2px solid $pink-300;
    padding: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
}

h1 {
    margin-top: 2.5em;
    margin-bottom: 1.5em;
}

h2 {
    margin-top: 2em;
    margin-bottom: 1em;
}

h3 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

@include media-breakpoint-up(lg) {
    .w-lg-50 {
        width: 50% !important;
    }
}

@include media-breakpoint-down(lg) {
    .w-mobile-100 {
        width: 100%;
    }
}

.animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.vapor-molecule {
    box-shadow: 0px 1px 2px rgba($off-black-2, 0.05);
    border-radius: 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    padding: 12px 16px;
    min-width: 320px;
    text-align: left;

    @include media-breakpoint-down(lg) {
        font-size: 14px;
        padding: 7px 16px;
        width: 100%;
    }
}

.vapor-molecule-list {
    margin-bottom: 8px;
}

.mobile-drop-down-menu {
    @include media-breakpoint-down(lg) {
        align-items: flex-start;
        padding-right: 16px;
        padding-top: 20px;
        padding-bottom: 0;
        box-shadow: 0px 19px 32px rgba(black, 0.05);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        margin-bottom: 0;
        max-height: 250px;
        overflow-y: auto;

        li a {
            margin-left: 16px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 150%;
            margin-bottom: 24px;
            text-decoration: none;
        }

        li a.active,
        a:hover,
        li a:active {
            color: $blue-300;
        }

        li:first-child {
            margin-top: 0;
        }

        li:last-child {
            margin-bottom: 0;
        }
    }
}

.btn-icon {
    height: 21px;
    width: 21px;
}

.vapor-feature-card {
    border-radius: 24px;
    padding: 48px;
    gap: 24px;
    border: none;

    @include media-breakpoint-down(lg) {
        padding: 24px;
    }

    .feature-card-icon {
        height: 48px;
        width: 48px;
        background-color: $blue-300;
    }

    .card-title {
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 125%;
        margin-top: 28px;

        @include media-breakpoint-down(lg) {
            font-size: 24px;
        }
    }

    .card-text {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
    }
}
